{layout name="layout" /}

<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i>
    <a href="{:url('admin/index/index')}"> 首页</a>
    <span class="c-gray en">&gt;</span>
    <a href="{:url('admin/admin_menu/index')}">菜单管理</a>
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);"
        title="刷新">
        <i class="Hui-iconfont">&#xe68f;</i>
    </a>
</nav>

<div class="Hui-article">
	<article class="cl pd-20" >
		<div class="cl pd-5 bg-1 bk-gray">
			<span class="l">
				<!-- <a href="javascript:;" onclick="del_all()" class="btn btn-danger radius">
					<i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> -->
				<a class="btn btn-primary radius" href="{:url('addOrEdit')}">
					<i class="Hui-iconfont">&#xe600;</i> 添加目录</a>
			</span>
			<!-- <span class="r">共有数据：<strong>54</strong> 条</span>  -->
		</div>
		<div class="mt-10" style="min-width:800px;">
			<table class="table table-border table-bordered table-hover table-bg">
				<thead>
					<tr>
						<th scope="col" colspan="9">目录管理</th>
					</tr>
					<tr class="text-c">
						<th width="25px">
							<input type="checkbox" value="" name="">
						</th>
						<th width="120px">名称</th>
						<th width="120px">上级菜单</th>
						<th width="60px">图标</th>
						<th width="60px">类型</th>
						<th width="160px">url</th>
						<th width="200px">权限</th>
						<th width="80px">状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					{foreach $data as $value}
					<tr class="text-c">
						<td>
							<input type="checkbox" value="{$value.id}" name="checkbox[]">
						</td>
						<td  class="text-l">{notempty name="value.child"}
							<a href="javascript:void(0);" title="展开" data-status="0"  onClick="loadchild(this,'{$value.id}')">
							<i class="Hui-iconfont">&#xe6d7;</i></a>{/notempty}
							{$value.name}</td>
						<td></td>
						<td><i class="Hui-iconfont">{$value.icon}</i></td>
						<td><span class="label label-default">{$type[$value.type]}</span></td>
						<td>{$value.url}</td>
						<td>{$value.perms}</td>
						<td>{eq name="value.status" value="1"}
							<a href="javascript:void(0);" title="停用" onClick="changeStatus(this,'{$value.id}')" data-status="{$value.status}" style="text-decoration:none">
								<span class="label label-success radius">正常</span>
							</a>
							{else/}
							<a href="javascript:void(0);" title="启用" onClick="changeStatus(this,'{$value.id}')" data-status="{$value.status}" style="text-decoration:none">
								<span class="label label-default radius">停用</span>
							</a>
							{/eq}
						</td>
						<td class="f-14">
							<a title="编辑" href="{:url('addOrEdit','id='.$value.id)}" style="text-decoration:none">
								<i class="Hui-iconfont">&#xe6df;</i>
							</a>
							<a title="删除" href="javascript:;" onclick="del(this,'{$value.id}')" class="ml-5" style="text-decoration:none">
								<i class="Hui-iconfont">&#xe6e2;</i>
							</a>
						</td>
					</tr>
					{notempty name="value.child"} {foreach $value.child as $val}
					<tr class="text-c parent_{$value.id}" style="display: none;">
						<td>
							<input type="checkbox" value="{$val.id}" name="checkbox[]">
						</td>
						<td>{notempty name="val.child"} 
							<a class="child" href="javascript:void(0);" title="展开" data-status="0"  onClick="loadchild(this,'{$val.id}')">
							<i class="Hui-iconfont">&#xe6d7;</i></a>{/notempty} 
							{$val.name}</td>
						<td>{$value.name}</td>
						<td><i class="Hui-iconfont">{$val.icon}</i></td>
						<td><span class="label label-success">{$type[$val.type]}</span></td>
						<td>{$val.url}</td>
						<td>{$value.perms}</td>
						<td>{eq name="val.status" value="1"}
							<a href="javascript:void(0);" title="停用" onClick="changeStatus(this,'{$val.id}')" data-status="{$val.status}" style="text-decoration:none">
								<span class="label label-success radius">正常</span>
							</a>
							{else/}
							<a href="javascript:void(0);" title="启用" onClick="changeStatus(this,'{$val.id}')" data-status="{$val.status}" style="text-decoration:none">
								<span class="label label-default radius">停用</span>
							</a>
							{/eq}
						</td>
						<td class="f-14">
							<a title="编辑" href="{:url('addOrEdit','id='.$val.id)}" style="text-decoration:none">
								<i class="Hui-iconfont">&#xe6df;</i>
							</a>
							<a title="删除" href="javascript:;" onclick="del(this,'{$val.id}')" class="ml-5" style="text-decoration:none">
								<i class="Hui-iconfont">&#xe6e2;</i>
							</a>
						</td>
					</tr>
					{notempty name="val.child"} {foreach $val.child as $vo}
					<tr class="text-c grandparent_{$value.id} parent_{$val.id}" style="display: none;">
						<td>
							<input type="checkbox" value="{$vo.id}" name="checkbox[]">
						</td>
						<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {$vo.name}</td>
						<td>{$val.name}</td>
						<td></td>
						<td><span class="label label-default">{$type[$vo.type]}</span></td>
						<td>{$vo.url}</td>
						<td>{$vo.perms}</td>
						<td>{eq name="vo.status" value="1"}
							<a href="javascript:void(0);" title="停用" onClick="changeStatus(this,'{$vo.id}')" data-status="{$vo.status}" style="text-decoration:none">
								<span class="label label-success radius">正常</span>
							</a>
							{else/}
							<a href="javascript:void(0);" title="启用" onClick="changeStatus(this,'{$vo.id}')" data-status="{$vo.status}" style="text-decoration:none">
								<span class="label label-default radius">停用</span>
							</a>
							{/eq}
						</td>
						<td class="f-14">
							<a title="编辑" href="{:url('addOrEdit','id='.$vo.id)}" style="text-decoration:none">
								<i class="Hui-iconfont">&#xe6df;</i>
							</a>
							<a title="删除" href="javascript:;" onclick="del(this,'{$vo.id}')" class="ml-5" style="text-decoration:none">
								<i class="Hui-iconfont">&#xe6e2;</i>
							</a>
						</td>
					</tr>
					{/foreach} {/notempty}{/foreach} {/notempty} {/foreach}
				</tbody>
			</table>
		</div>
	</article>
</div>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
	function loadchild(obj, id){
		var status = $(obj).data('status');
		// console.log(obj);
		// console.log(id);
		// console.log(status);
		
		if (status ==1) {
			$(".parent_"+id).css("display", "none");
			$(".parent_"+id).find("td a.child").children('i').html('&#xe6d7;');
			$(".parent_"+id).find("td a.child").data('status', 0);
			$(".grandparent_"+id).css("display", "none");
			$(obj).children('i').html('&#xe6d7;');
			$(obj).data('status', 0);
			return false;
		}
		$(".parent_"+id).css('display', '');
		$(obj).children('i').html('&#xe6d5;');
		$(obj).data('status', 1);
	}

	function del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $.post('delete', {
                'id': id
            }, function (data) {
                if (data.code == 1) {
					console.log($(obj));
                    $(obj).parents("tr").remove();
                    layer.msg(data.msg, {
                        icon: 1,
                        time: 1000
                    });
                } else {
                    layer.msg(data.msg, {
                        icon: 5,
                        time: 2000
                    });
                    return false;
                }
            }, 'json');
        });
    }

	/**
	 * 改变状态值 status 1, 正常; 2, 停用
	 */
	function changeStatus(obj, id) {
		var status = $(obj).data('status');
		var change_status = 2 - status + 1;
		$(obj).data('status', change_status);
		$.post('status', {
                'id': id,
				'status': change_status
            }, function (data) {
				// console.log(data);
                if (data.code == 1) {
                    if (change_status == 1) {
						$(obj).attr('title', '停用');
						$(obj).html('<span class="label label-success radius">正常</span>');
					} else {
						$(obj).attr('title', '启用');
						$(obj).html('<span class="label label-default radius">停用</span>');
					}
                    layer.msg(data.msg, {
                        icon: 1,
                        time: 1000
                    });
                } else {
                    layer.msg(data.msg, {
                        icon: 5,
                        time: 2000
                    });
                    return false;
                }
        }, 'json');
	}
</script>
<!--请在上方写此页面业务相关的脚本-->